<template >
  <panel>
    <h2 style="margin-bottom:15px">说明：</h2>
    <table style="margin-bottom:15px">
      <thead>
      <tr>
        <th>参数</th>
        <th>说明</th>
        <th>类型</th>
        <th>默认值</th>
      </tr>
      </thead>
      <tbody>
      <tr>
        <td>house-list</td>
        <td>必填，所需构建房源树的房源list</td>
        <td>list</td>
        <td>——</td>
      </tr>
      <tr>
        <td>config</td>
        <td>选填，用于构建房源树的三个关键字段，楼层号、单元号、房间所在序号，使用时可直接更改组件默认值，也可传入一个配置对象，以默认值的格式</td>
        <td>object</td>
        <td>
          {
            unit:'unitNo',
            floor:'floorNo',
            room:'roomNo'
          }
        </td>
      </tr>
      </tbody>
    </table>

    <div style="margin-bottom:15px">未完成项：样式制定，销控图颜色、图例，房源单选、多选功能等。后续有真实数据时补充</div>

    <el-form :model="house" ref="ruleForm" label-width="100px" class="demo-ruleForm" label-position="left">
      <el-row>
        <el-col :span="6">
          <el-form-item label="单元数" prop="unitNum">
            <el-input v-model="house.unitNum"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="楼层数" prop="floorNum">
            <el-input v-model="house.floorNum"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="楼层房间数" prop="roomNum">
            <el-input v-model="house.floorRoomNum"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-button type="primary" @click="makeHouseList()">生成</el-button>
          <span>（尝试填入数字生成房源树）</span>
        </el-col>
      </el-row>
    </el-form>

    <houseTable :house-list="houseList"></houseTable>
  </panel>

</template>

<script>
  const houseTable = () => import('@/components/houseTable');

  export default {
    components:{ houseTable },
    data() {
      return{
        houseId:0,
        house:{
          unitNum:3,
          floorNum:4,
          floorRoomNum:4
        },
        houseList:[],
        config:{
          floor:'floorNo',
          unit:'unitNo',
          room:'roomNo'
        }
      }
    },
    methods:{
      makeHouseList(){
        this.clean();
        for(let i=1;i<=this.house.unitNum;i++){
          for(let j=1;j<=this.house.floorNum;j++){
            for(let k=1;k<=this.house.floorRoomNum;k++){
              let house = {
                id:this.houseId++,
                unitNo:i,
                floorNo:j,
                roomNo:k
              };
              this.houseList.push(house);
            }
          }
        }
      },
      clean() {
        this.houseId = 0;
        this.houseList = [];
      }
    }
  }
</script>

<style lang="scss" scoped>
  .el-col-6{
    padding-right:15px;
  }
  table{
    width:100%;
    th,td{
      border:1px solid #ccc;
      padding:5px;
      text-align: center;
    }
  }
</style>
